<template>
  <div id="detail">
    <!-- footer为底部固定栏，购物车图标数字接口(badge="99+"/) -->
    <div class="footer">
      <div class="footer1">
        <van-icon name="chat-o" size="18px" />
        <div>客服</div>
      </div>
      <div class="footer1" @click="toGoodsCart()">
        <van-icon name="shopping-cart-o" :badge="$store.getters.totalNum" size="18px"/>
        <div>购物车</div>
      </div>
      <div class="footer2">
        <div class="footer21" @click="$store.dispatch('addGoodsFn',goods_id)">加入购物车</div>
      </div>
    </div>
    <!-- footer到此结束 -->
    <div class="box1">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in images" :key="index">
          <img v-lazy="item.pics_big_url" width="100%" @click="handleClick" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="box2">
      <div class="price">￥{{goods_price}}</div>
      <div class="names">
        <div class="name1">{{goods_name}}</div>
        <div class="name2">
          <div>☆</div>
          <div class="shoucang">收藏</div>
        </div>
      </div>
      <div class="kuaidi">快递：免运费</div>
    </div>
    <div class="line"></div>
    <div class="box3">
      <div class="box31">
        <span>促销：</span>
        <span class="box312">满300元减30元</span>
      </div>
      <div class="box31">
        <span>已选：</span>
        <span class="box312">黑色/s/1件</span>
      </div>
    </div>
    <div class="line"></div>
    <div class="box4" @click="toGoodsAddressList()">
      <span>送至</span>
      <span class="shouhuo">{{addressDetail}}</span>
    </div>
    <div class="line"></div>
    <!-- tab栏 -->
    <div box5>
      <van-tabs v-model="active">
        <van-tab title="图文详情" v-html="goods_introduce"></van-tab>
        <van-tab title="规格参数">
          <div class="canshu">
            <van-row>
              <van-col class="canshu1" span="10">{{attrs.attr_name}}</van-col>
              <van-col span="14" class="canshu1">{{attrs.attr_vals}}</van-col>
            </van-row>
            <van-row>
              <van-col class="canshu1" span="10">{{attrs.attr_value}}</van-col>
              <van-col span="14" class="canshu1">{{attrs.add_price}}</van-col>
            </van-row>
            <van-row>
              <van-col class="canshu1" span="10">{{attrs.attr_sel}}</van-col>
              <van-col span="14" class="canshu1">{{attrs.attr_write}}</van-col>
            </van-row>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [],
      goods_price: "0",
      goods_name: "",
      active: 2,
      goods_introduce: "",
      attrs: "",
      addressDetail: "请选择收货地址",
      goodsDetail: "",
      imgURL: [],
      goods_id: 0
    };
  },
  created() {
    this.getDetail();
    let address = localStorage.getItem("address");
    if (address) {
      console.log(JSON.parse(address));
      const addressList = JSON.parse(address);
      addressList.some(item => {
        if (item.isDefault === true) {
          this.addressDetail =
            item.province + item.city + item.county + item.addressDetail;
        }
        return;
      });
    }
  },
  methods: {
    async getDetail() {
      let goodsId = location.hash.split("/")[3];
      // console.log(goodsId);
      const { data: res } = await this.$http.get("/goods/detail", {
        params: { goods_id: goodsId }
      });
      // console.log(res);
      if (res.meta.status !== 200) return this.$toast.fail(res.meta.msg);
      this.goodsDetail = res.message;
      this.images = res.message.pics;
      this.goods_price = res.message.goods_price;
      this.goods_name = res.message.goods_name;
      this.goods_introduce = res.message.goods_introduce;
      this.attrs = res.message.attrs[0];
      this.goods_id = res.message.goods_id;
    },
    toGoodsAddressList() {
      this.$router.push(`/address_list`);
    },
    toGoodsCart() {
      this.$router.push(`/cart`);
    },
    handleClick() {
      this.images.forEach(ele => {
        this.imgURL.push(ele.pics_big_url);
      });
      this.ImagePreview(this.imgURL);
    }
  }
};
</script>

<style lang="less" scoped>
#detail {
  height: 15000px;
  .footer {
    padding-left: 5px;
    height: 50px;
    z-index: 999;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    display: flex;
    color: #7d7e80;
    font-size: 10px;

    .footer1 {
      width: 48px;
      height: 50px;
      padding-top: 10px;
      margin: 0 auto 5px;
      text-align: center;
    }
    .footer2 {
      width: 292.4px;
      height: 40px;
      .footer21 {
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        background: linear-gradient(90deg, #ffd01e, #ff8917);
        margin-right: 5px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        margin: 5px 0 5px 5px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: #fff;
        padding-top: 10px;
      }
    }
  }
  .box2 {
    padding: 0 10px;
    width: 100%;
    height: 120px;
    .price {
      font-size: 20px;
      color: red;
      margin: 20px 0;
    }
    .names {
      display: flex;
      .name1 {
        font-size: 13px;
        width: 333.5px;
      }
      .name2 {
        width: 55px;
        height: 33.6px;
        text-align: center;
        font-size: 10px;
        padding-top: -20px;
        border-left: 1px solid #eee;
      }
    }
    .kuaidi {
      font-size: 13px;
      color: #666;
      font-weight: 700;
      line-height: 40px;
    }
  }
  .line {
    border-bottom: 6px solid #efefef;
  }
  .box3 {
    padding: 0 10px;
    font-size: 12px;
    .box31 {
      line-height: 40px;
      .box312 {
        color: #666;
      }
    }
  }
  .box4 {
    font-size: 12px;
    padding: 12px 10px 12px 10px;
    .shouhuo {
      color: #666;
      margin-left: 10px;
    }
  }
  .canshu {
    .canshu1 {
      padding: 25px 0 25px 10px;
      font-size: 12px;
      border: 1px solid #eee;
    }
  }
}
</style>


